import React, { PropsWithChildren } from "react";
import {
  CountUpWrap,
  PercentAmount,
  PercentItemIcon,
  PercentItemIconWrap,
  PercentItemWrap,
  PercentUnit,
  TypeZhTextStyle,
  AmountItem1AmountLine,
} from "./styles";
import CountUp, { CountUpProps } from "react-countup";

export interface ShipmentPercentItemProps extends PropsWithChildren {
  /**
   * 文字颜色
   */
  primaryColor?: string;
  /**
   * 百分比
   */
  percent?: number;
  /**
   * 标题
   */
  typeTitle?: string;
  /**
   * 单位
   */
  unitName?: string;
  /**
   * 金额
   */
  amount?: number;

  countUpProps?: CountUpProps;
  /**
   * 设置src
   */
  imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
}

export default function ShipmentPercentItem({
  imgProps,
  primaryColor = "#68A8FF",
  percent = 0,
  typeTitle = "",
  unitName = "",
  amount = 0,
  countUpProps,
}: ShipmentPercentItemProps) {
  return (
    <PercentItemWrap>
      <PercentItemIconWrap>
        <PercentItemIcon {...imgProps} />
        <CountUpWrap primaryColor={primaryColor}>
          <CountUp
            start={0}
            decimals={0}
            end={percent}
            formattingFn={(v) => v + "%"}
          />
        </CountUpWrap>
      </PercentItemIconWrap>

      <TypeZhTextStyle>{typeTitle}</TypeZhTextStyle>
      <AmountItem1AmountLine primaryColor={primaryColor}>
        {unitName ? (
          <PercentAmount primaryColor={primaryColor}>
            <CountUp start={0} end={amount} decimals={2} {...countUpProps} />
          </PercentAmount>
        ) : (
          <PercentAmount primaryColor={primaryColor}> </PercentAmount>
        )}

        <PercentUnit primaryColor={primaryColor}>{unitName}</PercentUnit>
      </AmountItem1AmountLine>
    </PercentItemWrap>
  );
}
